<template>
  <el-button @click="preview">点击chart预览</el-button>
  <div id="chartContainerEcho" style="width: 1200px; height: 1080px"></div>
</template>
<script setup lang="ts">
//挂载时候，构建bi展现器实例
import {onMounted} from 'vue';

import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
import {filterDatasetsFrom_params} from "@/utils/xzToolsUtil"
let isPrintInfo=true;
const usePreStore = usePreviewStore();

let onUpdateDatasetlist_rtn = [
  {
    name: "商品销售",
    id: "商品销售id",
    fields:
        [
          {
            name: "商品名称",                           //这些name：可以是中文？
            data_type: 3
          },
          {
            name: "区域名称",
            data_type: 3
          },
          {
            name: "销售额",
            data_type: 2
          },
        ],

    params:
        [
          {
            name: "商品名称",                           //这些name：可以是中文？
            data_type: 3
          },
          {
            name: "区域名称",
            data_type: 3
          },

        ],

  },
  {
    name: "商品季度销售",
    id: "商品季度销售id",
    fields: [
      {
        name: "商品",
        data_type: 3
      }, {
        name: "季度",
        data_type: 2

      }, {
        name: "销售额",
        data_type: 2
      }
    ],
    params:
        [
          {
            name: "商品",
            data_type: 3
          },
        ],
  }
];
import {get_onupdatedatamaps_cdtabs3echo} from "@/views/chartDesigner/chartDesignerEltabs3/get_onUpdateDataMaps_ForEcho";


let option = {};
let reportInstance = null;
const preview = () => {
  if(isPrintInfo)
  console.log(".....cdtabs3.echo.vue...........preview......usePreStore.xzChartDesigners..", usePreStore.xzChartDesigners)
  if (usePreStore.xzChartDesigners.size > 0) {//如果设计器有保存数据
    if (usePreStore.xzChartDesigners.has("chartDesignerMain")) {//哪个设计器保存的数据
      let {config, dataConfig} = usePreStore.xzChartDesigners.get('chartDesignerMain')
      if (dataConfig.length > 0) {//BI设计器模板实例，涉及到的数据集信息（如果是json类型，json记录还会包含在里面，外部数据源只有名字没有记录）
        try {
          option.reportConfig = config;
          option.reportData = [];
          option.paramsConfig = [];
          document.getElementById("chartContainerEcho").innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。
          reportInstance = new XZDashboard("#chartContainerEcho", option);
          reportInstance.updateData(dataConfig);//这里传入的就是  chartDesigner模板需要的数据集名称，json数据集自带数据，外部数据不需要记录
          //reportInstance.updateData([]);//这里传入[],表示没有用到任何的数据

          reportInstance.initView();
        } catch (error) {
          console.log("...cdtabs3.echo.vue...preview .... error....", error);
        }

      } else {
       if(isPrintInfo)
        console.log("......cdtabs3.echo.vue..........preview.....一般，不会进入这个分支...")
      }


    } else {
      if(isPrintInfo)
      console.log("...cdtabs3.echo.vue...has not.........")
    }
  } else {
    if(isPrintInfo)
    console.log("...cdtabs3.echo.vue...<=0.........")
  }
}


//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
function onUpdateDatasetList() {
  if(isPrintInfo)
  console.log("...cdtabs3.echo.vue...onUpdateDatasetList  is called")

  return new Promise((resolve, reject) => {

    resolve(onUpdateDatasetlist_rtn)

  })
}

option.onUpdateDatasetList = onUpdateDatasetList
let paramsFilterOnUpdateDatas = (datasets, params) => {
  //作为测试样例，为了简化，这里只是模拟一个手动参数场景
  let onupdatedatamaps = get_onupdatedatamaps_cdtabs3echo();
  let __rtn = [];
  datasets.forEach((dataset) => {
    if (onupdatedatamaps.get(dataset.name)) {//后台有这个表结构的数据记录
      if (params.length > 0) {//如果有查询参数，从全部表名数据记录中过滤
        let tmp_ls = [];//满足条件的记录返回，测试，目前仅仅用于 参数=单值
        onupdatedatamaps.get(dataset.name).response_data.forEach((tmp_item) => {//每一个数据集，循环过滤
          for (let param of params) {
            if (param.value.length == 1)//参数取值一个
            {
              if (tmp_item[param.name] == param.value) {//判断参数值和记录字段值是否相等
                tmp_ls.push(tmp_item);
              }
            } else {//当前参数的值是多个，数组
              for (let __valueIt of param.value) {
                if (tmp_item[param.name] == __valueIt) {//判断参数值和记录字段值是否相等
                  tmp_ls.push(tmp_item);   //循环，只要有一个相等，就可以返回
                  break;//没有必要再循环，否则会重复放入
                }
              }
            }
          }
        })
        onupdatedatamaps.get(dataset.name).response_data = tmp_ls;
        __rtn.push(onupdatedatamaps.get(dataset.name));
      } else {//如果没有查询参数，该表结构记录全部返回
        __rtn.push(onupdatedatamaps.get(dataset.name));
      }
    }
  });
  return __rtn;
}
let onUpdateData = (datasets, params) => {
  console.log("...cdtabs3.echo.vue.....datasets:", datasets, "params:", params);
  //一般的处理方案：把这里的  数据集名称 + （对应的参数名称+面板选择的参数值） ，一起发到后台，去拼sql
  //不建议，大量共享数据集，因为不同的模板，同一个数据集的要求也会出现不同的限制和偏好
//   let onupdatedatamaps = get_onUpdateDataMaps_Echo();
//   let __rtn = [];
// //作为测试样例，为了简化，这里只是模拟一个手动参数场景
//   datasets.forEach((dataset) => {
//     if (onupdatedatamaps.get(dataset.name)) {//后台有这个表结构的数据记录
//       if (params.length > 0) {//如果有查询参数，从全部表名数据记录中过滤
//         let tmp_ls = [];//满足条件的记录返回，测试，目前仅仅用于 参数=单值
//         onupdatedatamaps.get(dataset.name).response_data.forEach((tmp_item) => {//每一个数据集，循环过滤
//           for( let  param of  params){
//             if(param.value.length == 1)//参数取值一个
//             {
//               if (tmp_item[param.name] == param.value) {//判断参数值和记录字段值是否相等
//                 tmp_ls.push(tmp_item);
//               }
//             }else{//当前参数的值是多个，数组
//                 for (let __valueIt of param.value){
//                   if (tmp_item[param.name] == __valueIt) {//判断参数值和记录字段值是否相等
//                     tmp_ls.push(tmp_item);   //循环，只要有一个相等，就可以返回
//                     break;//没有必要再循环，否则会重复放入
//                   }
//                 }
//             }
//           }
//         })
//         onupdatedatamaps.get(dataset.name).response_data = tmp_ls;
//         __rtn.push(onupdatedatamaps.get(dataset.name));
//       } else {//如果没有查询参数，该表结构记录全部返回
//         __rtn.push(onupdatedatamaps.get(dataset.name));
//       }
//     }
//   })
  return new Promise((resolve, reject) => {
    let __rtn;
    //resolve(paramsFilterOnUpdateDatas(datasets, params));
    try {
      __rtn = filterDatasetsFrom_params(datasets, params, onUpdateDatasetlist_rtn, get_onupdatedatamaps_cdtabs3echo);

    } catch (error) {
      console.log(error);
    }

    resolve(__rtn);
  })
}
option.onUpdateData = onUpdateData;


//导入BI报表对应的完整的数据集,既然是回显，应该是空画布。
onMounted(() => {
  option.reportConfig = [];
  option.reportData = [];
  option.paramsConfig = [];
});
</script>


<style scoped>

</style>
